.sla-compliance {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  .container {
    height: 170px;
    width: 314px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 58px;
    .chart {
      width: 160px;
      height: 160px;
      position: relative;
    }

    .tooltips {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 16px;
      .complied,
      .not-compliance {
        height: 22px;
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        gap: 4px;
        .left {
          display: flex;
          align-items: center;
          gap: 4px;
          .icon {
            width: 8px;
            height: 8px;
            background-color: #3388ff;
          }

          .text {
            color: var(--live-angular-color-text-regular);
            white-space: nowrap;
          }
        }
      }
      .not-compliance {
        .icon {
          background-color: var(
            --live-angular-color-track-background
          ) !important;
        }
      }
    }
  }
}
